<template>
    <panelHead :route="route"/>
    <div class="outer-wrapper">
    <div class="container">
      <!-- 左侧无人船图片 -->
      <div class="left-panel">
        <img src="@/assets/boat.png" alt="无人船" class="boat-image" />
      </div>

      <!-- 右侧参数展示 -->
      <div class="right-panel">
        <el-card shadow="hover">
          <template #header>
            <span>无人船参数信息</span>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="长度">{{ boatInfo.length }} cm</el-descriptions-item>
            <el-descriptions-item label="宽度">{{ boatInfo.width }} cm</el-descriptions-item>
            <el-descriptions-item label="高度">{{ boatInfo.height }} cm</el-descriptions-item>
            <el-descriptions-item label="重量">{{ boatInfo.weight }} kg</el-descriptions-item>
            <el-descriptions-item label="旋转速度">{{ boatInfo.rotate_speed }} rpm</el-descriptions-item>
            <el-descriptions-item label="最大速度">{{ boatInfo.max_speed }} km/h</el-descriptions-item>
            <el-descriptions-item label="功能简介">{{ boatInfo.function_Introduction }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>
    </div>
  </div>
</template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useRoute } from 'vue-router'
  const route = useRoute()
  // 无人船信息
  const boatInfo = ref({
    deviceId: '001',
    length: 30,
    width: 20,
    height: 25,
    weight: 16,
    rotate_speed: 1300,
    max_speed: 30,
    function_Introduction: '无人船具有自主航行、避障、数据采集等功能'
  })
  
  /* const fetchBoatInfo = async () => {
    try {
      const res = await axios.get('/api/boat/info')  // 假设这是后端接口
      boatInfo.value = res.data
    } catch (err) {
      console.error('获取无人船信息失败:', err)
    }
  } */
  
  // 页面加载时获取信息
  /* onMounted(fetchBoatInfo) */
  </script>
  
  <style scoped>
  
  .outer-wrapper {
    border: 2px solid #dcdfe6;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    background-color: #ffffff;
    margin: 20px;
    }

  .container {
    display: flex;
    gap: 20px;
    padding: 20px;
    align-items: stretch; /* 让左右高度对齐 */
  }
  
  .left-panel {
    flex: 1;
  }
  
  .boat-image {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  .right-panel {
    flex: 1;
  }
  </style>